<!DOCTYPE html>
<!-- saved from url=(0019)http://www.json.cn/ -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Json格式化验证</title>
    
    <link href="to_json_files/bootstrap.min.css" rel="stylesheet">
    <link href="to_json_files/font-awesome.min.css" rel="stylesheet">
    <link href="to_json_files/base.css" rel="stylesheet">
    <style></style>
<style type="text/css">.json_key{ color: #92278f;font-weight:bold;}.json_null{color: #f1592a;font-weight:bold;}.json_string{ color: #3ab54a;font-weight:bold;}.json_number{ color: #25aae2;font-weight:bold;}.json_link{ color: #717171;font-weight:bold;}.json_array_brackets{}</style></head>
<body style="over-flow:hidden;">
<header class="header">
    <div class="row-fluid">
        <div class="col-md-5" style="position:relative;">
            <div style="padding: 10px;" id="menuDiv"></div>
        </div>
        <nav class="col-md-7" style="padding:10px 0;" align="right">
        </nav>
        <br style="clear:both;">
    </div>
</header>


<main class="row-fluid">
    <div class="col-md-5" style="padding:0;">
        <div class="numberedtextarea-wrapper "><textarea id="json-src" placeholder="在此输入json字符串或XML字符串..." class="form-control" style="height:553px;padding:0 10px 10px 20px;border:0;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none; outline:none;"></textarea><div class="numberedtextarea-line-numbers" style="padding-top: 0px; line-height: 20px; font-family: Menlo, Monaco, Consolas, &quot;Helvetica Neue&quot;, Helvetica, &quot;Courier New&quot;, 微软雅黑, monospace, Arial, sans-serif, 黑体; width: 30px;"><div class="numberedtextarea-number numberedtextarea-number-1">1</div><div class="numberedtextarea-number numberedtextarea-number-2">2</div><div class="numberedtextarea-number numberedtextarea-number-3">3</div><div class="numberedtextarea-number numberedtextarea-number-4" style="margin-bottom: 10px;">4</div></div></div>
    </div>
    <div class="col-md-7" style="padding:0;">
        <div style="padding:10px;font-size:16px;border-bottom:solid 1px #ddd;" class="navi">
            <a href="#" class="tip zip" title="" data-placement="bottom" data-original-title="压缩" style="color:#999;"><i class="fa fa-database"></i></a>
            <a href="#" class="tip clear" title="" data-placement="bottom" data-original-title="清空"><i class="fa fa-trash"></i></a>
        </div>
        <div id="right-box" style="height:510px;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none;overflow-y:scroll; outline:none;position:relative;">
            <div id="line-num" style="background-color:#fafafa;padding:0px 8px;float:left;border-right:dashed 1px #eee;display:none;z-index:-1;color:#999;position:absolute;text-align:center;over-flow:hidden;"></div>
            <div class="ro" id="json-target" style="padding:0px 25px;over"></div>
        </div>
        <form id="form-save" method="POST"><input type="hidden" value="" id="txt-content" name="content"></form>
    </div>
    <br style="clear:both;">
</main>
<link href="to_json_files/jquery.numberedtextarea.css" rel="stylesheet">
<script src="to_json_files/hm.js"></script><script src="to_json_files/jquery.min.js"></script>
<script src="to_json_files/jquery.message.js"></script><div style="clear:both;"></div><div id="jquery-beauty-msg"></div>
<script src="to_json_files/jquery.json.js"></script>
<script src="to_json_files/jquery.xml2json.js"></script>
<script src="to_json_files/jquery.json2xml.js"></script>
<script src="to_json_files/json2.js"></script>
<script src="to_json_files/jsonlint.js"></script>
<script src="to_json_files/bootstrap.min.js"></script>
<script src="to_json_files/jquery.numberedtextarea.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.get("menu.html",function(data){
		$("#menuDiv").html(data);
	})
});
$('textarea').numberedtextarea();
var current_json = '';
var current_json_str = '';
var xml_flag = false;
var zip_flag = false;
var shown_flag = false;
$('.tip').tooltip();
function init(){
    xml_flag = false;
    zip_flag = false;
    shown_flag = false;
    renderLine();
    $('.xml').attr('style','color:#999;');
    $('.zip').attr('style','color:#999;');

}
$('#json-src').keyup(function(){
    init();
    var content = $.trim($(this).val());
    var result = '';
    if (content!='') {
        //如果是xml,那么转换为json
        if (content.substr(0,1) === '<' && content.substr(-1,1) === '>') {
            try{
                var json_obj = $.xml2json(content);
                content = JSON.stringify(json_obj);
            }catch(e){
                result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
                current_json_str = result;
                $('#json-target').html(result);
                return false;
            }

        }
        try{
            current_json = jsonlint.parse(content);
            current_json_str = JSON.stringify(current_json);
            //current_json = JSON.parse(content);
            result = new JSONFormat(content,4).toString();
        }catch(e){
            result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
            current_json_str = result;
        }

        $('#json-target').html(result);
    }else{
        $('#json-target').html('');
    }

});
$('.xml').click(function(){
    if (xml_flag) {
        $('#json-src').keyup();
    }else{
        var result = $.json2xml(current_json);
        $('#json-target').html('<textarea style="width:100%;height:100%;border:0;resize:none;">'+result+'</textarea>');
        xml_flag = true;
        $(this).attr('style','color:#15b374;');
    }

});
$('.shown').click(function(){
    if (!shown_flag) {
        renderLine();
        $('#json-src').attr("style","height:553px;padding:0 10px 10px 40px;border:0;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none; outline:none;");
        $('#json-target').attr("style","padding:0px 50px;");
        $('#line-num').show();
        $('.numberedtextarea-line-numbers').show();
        shown_flag = true;
        $(this).attr('style','color:#15b374;');
    }else{
        $('#json-src').attr("style","height:553px;padding:0 10px 10px 20px;border:0;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;resize: none; outline:none;");
        $('#json-target').attr("style","padding:0px 20px;");
        $('#line-num').hide();
        $('.numberedtextarea-line-numbers').hide();
        shown_flag = false;
        $(this).attr('style','color:#999;');
    }
});
function renderLine(){
    var line_num = $('#json-target').height()/20;
    $('#line-num').html("");
    var line_num_html = "";
    for (var i = 1; i < line_num+1; i++) {
        line_num_html += "<div>"+i+"<div>";
    }
    $('#line-num').html(line_num_html);
}
$('.zip').click(function(){
    if (zip_flag) {
        $('#json-src').keyup();
    }else{
        $('#json-target').html(current_json_str);
        zip_flag = true;
        $(this).attr('style','color:#15b374;');
    }

});
$('.clear').click(function(){
     $('#json-src').val('');
     $('#json-target').html('');
});
$('.save').click(function(){
    var content = JSON.stringify(current_json);
    $('#txt-content').val(content);
    $("#form-save").submit();
});
$('#json-src').keyup();
</script>
</body></html>